<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-
scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/y_index.css" />
    <style>
    .searchBox {
        height: 1rem;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    #search {
        width: 80%;
        padding-left: .5rem;
        background: url(../img/search.png) no-repeat;
        -webkit-background-size: .28rem .28rem;
        background-size: .28rem .28rem;
    }


    .lBox {
        width: 2rem;
        height: 11rem;
        position: fixed;
        border-right: 1px solid #e8e8e8;
    }

    .rBox {
        margin-left: 2rem;
    }

    .lBox li {
        height: 1rem;
        border-bottom: 1px solid #e8e8e8;
    }

    .lBox li.active {
        color: #fff;
        background: linear-gradient(to right, #6c8eda, #4bc0ed);
    }

    .bottom {
        height: 1rem;
        border-top: 1px solid #e8e8e8;
    }


    .wh {
        width: 0.68rem;
        height: 0.68rem;
        display: flex;
        color: #666;
        font-size: .32rem;
        justify-content: center;
        align-items: center;
    }

    b {
        font-weight: normal;
    }

    #pay {
        width: 2rem;
        height: 1rem;
        background: linear-gradient(to right, #6c8eda, #4bc0ed);
        color: #fff;
    }

    .tip {
        position: absolute;
        width: 0.3rem;
        height: 0.31rem;
        background: #ff6a6a;
        color: #fff;
        font-size: 0.24rem;
        top: -0.1rem;
        left: 100%;
        border-radius: 1rem;
    }

    .btn {
        width: 1.6rem;
        height: 100%;
        color: #fff;
    }

    .del_btn {

        background: linear-gradient(to right, #0fa3a5, #3ec2c9);
    }
    /*选择*/

    input[name=cart]:checked+span {
        background: url(../img/check.png) no-repeat;
        background-size: 100% 100%;
    }

    .c {
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #e8e8e8;
        display: block;
        margin-right: .2rem;
    }

    .cir {
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        border: 1px solid #ccc;
    }
    </style>
</head>

<body>
    <div class="bigBox">
        <div class="container">
            <div class="bigBox">
                <ul class="container">
                    <label class="list flex_a bw p20 bdb">
                        <div>
                            <input type="checkbox" name="cart" hidden="" />
                            <span class="c"></span>
                        </div>
                        <div class="flex">
                            <img class="img" src="../img/y_8.png" style="width:1.7rem;height:1.5rem;" />
                            <ul class="ml20">
                                <a href="y_shopDetail.html">OBC 无线双耳超小隐形蓝牙挂耳式耳机 运动跑步必备</a>
                                <p class="col9 mt20">分类：分类1</p>
                                <li class="c4 mt10 font16 flex_sa">
                                    <span class="c4 font19">￥1920.00</span>
                                    <div class="flex c_box">
                                        <label class="wh minus border1 border-r1">
                                            <button class="font18 col9">&minus;</button>
                                        </label>
                                        <input class="font18 wh tac num" type="number" name="" value="0" />
                                        <label class="wh add bgce border-r1">
                                            <button class="font18 col9">+</button>
                                        </label>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </label>
                    <label class="list flex_a bw p20 bdb">
                        <div>
                            <input type="checkbox" name="cart" hidden="" />
                            <span class="c"></span>
                        </div>
                        <div class="flex">
                            <img class="img" src="../img/y_8.png" style="width:1.7rem;height:1.5rem;" />
                            <ul class="ml20">
                                <a href="y_shopDetail.html">OBC 无线双耳超小隐形蓝牙挂耳式耳机 运动跑步必备</a>
                                <p class="col9 mt20">分类：分类1</p>
                                <li class="c4 mt10 font16 flex_sa">
                                    <span class="c4 font19">￥1920.00</span>
                                    <div class="flex c_box">
                                        <label class="wh minus border1 border-r1">
                                            <button class="font18 col9">&minus;</button>
                                        </label>
                                        <input class="font18 wh tac num" type="number" name="" value="0" />
                                        <label class="wh add bgce border-r1">
                                            <button class="font18 col9">+</button>
                                        </label>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </label>
            </div>
            </ul>
        </div>
        <div class="bw flex bottom">
            <div class="flex1 flex_a flex_sb plr24">
                <li class="flex"><span class="cir flex mr20" id="allChose"></span>全选<span class="ml50 c2" id="del">删除</span></li>
                <li class="flex">合计：<span class="c4 t_price">￥0.00</span></li>
            </div>
            <div class="flex" style="height:100%;">
                <span class="pay_btn flex_aj bgc1 btn">下单</span>
            </div>
        </div>
    </div>
</body>

</html>
<script src="../js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/dlc.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.0/alipayjsapi.inc.min.js"></script>
<!--公司的常用函数封装-->
<script>
// 全选
$('#allChose').on('click', function() {
    console.log($('input[name=cart]:checked').length);
    $.each($("input[name='cart']"), function(i, n) { //参数i为遍历索引值，n为当前的遍历对象.
        if ($(this).is(":checked")) {

        } else {
            $(this).addClass()
        }
    });
    // totals();
})

//添加购物车
$('.list').on('click', '.add', function() {
    $('.tip').text($('.tip').text() * 1 + 1);
    var numbers = $(this).prevAll('input').val() * 1 + 1;
    var goods_id = $(this).parents('li').data('goods_id');
    $(this).parent().find('.num').val(numbers);
})
//减少购物车
$('.list').on('click', '.minus', function() {
    var numbers = $(this).nextAll('input').val() * 1 - 1;
    var goods_id = $(this).parents('li').data('goods_id');
    if ($(this).nextAll('input').val() > 0) {
        $(this).parent().find('.num').val(numbers);
    }
})
//加减购物车
function CartEditNum(type, goods_id, _this, numbers) {
    // dlc_request('/api/Shopping/api', { api_name: 'shoppingCartEditNum', seller_id: getUrlParam('seller_id'), type: type, goods_type: getUrlParam('type'), goods_id: goods_id, cupboard_id: getUrlParam('id') }, function(res) {
    //     console.log(res);
    //     if (res.code == '1') {
    //         if (type == 1) { //加
    //             $(_this).prevAll('input').val(numbers);
    //             totals();
    //             shoppingCartAnimate($(_this).parents('.list').find('.img'), $('#car'));
    //         } else { //减
    //             $(_this).nextAll('input').val(numbers);
    //             totals();
    //         }
    //     } else {
    //         dlctipbox.show(res.msg);
    //     }
    // })
}
// 删除
$('.del_btn').on('click', function() {
    $('input[name=cart]:checked').parent().parent().remove()
})
// 下单
$('.pay_btn').on('click', function() {
    location.href = 'ser_confirmOrder.html';
})

function totals() {
    var listObj = $('input[name=cart]:checked').parent().parent();
    var length = listObj.length;
    console.log(length);
    var total = 0;
    var total_num = 0;
    for (var i = 0; i < length; i++) {
        var single_price = listObj.find('.price').eq(i).text();
        var single_num = listObj.find('.num').eq(i).val();
        total += single_price * single_num;
        total_num += single_num * 1;
        console.log('总价：' + total);
    }
    $('.t_price').text('￥' + total.toFixed(2));
}
</script>